<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Personalize The Clock</title>
<link rel="stylesheet" type="text/css" href="setting.css" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/colorPicker.css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="colorpicker/jquery.colorPicker.js"></script>
<script type="text/javascript" src="clockFactory.js"></script>
<script type="text/javascript" src="ring.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
    <header>
      <h1>Personalize The Clock</h1>
	  <nav>
      <a href="clock.htm" target="_self">Home &nbsp;</a>
      <a href="setting.htm" target="_self">Personalize The Clock  &nbsp;</a>
      <a href="addEvent.htm" target="_self">Add A Notification  &nbsp;</a>
      <a href="removeEvent.htm" target="_self">Remove Notifications &nbsp;</a>
	  <a href="about.htm" target="_self">About &nbsp;</a>
	  </nav>
    </header>
	
	<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
	html>body #sortable li { height: 1.5em; line-height: 1.2em; }
	.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable({
			placeholder: "ui-state-highlight"
		});
		$( "#sortable" ).disableSelection();
	});
	//use colorpicker
    jQuery(document).ready(function($) {
    $('#monthcolor').colorPicker();
    })
	
	jQuery(document).ready(function($) {
    $('#datecolor').colorPicker();
    })
	
    jQuery(document).ready(function($) {
    $('#hourcolor').colorPicker();
    })

    jQuery(document).ready(function($) {
    $('#minutecolor').colorPicker();
    })

    jQuery(document).ready(function($) {
    $('#secondcolor').colorPicker();
    })

    jQuery(document).ready(function($) {
    $('#weekcolor').colorPicker();
    })	
	</script>

<h2>Rings from outter to inner</h2>




<ul id="sortable">
	<li class="ui-state-default" id="month">Month Ring &nbsp hide?
	<input id='monthshow' type='checkbox' name='monthshow' value='yes'/> 
	<input id="monthcolor" name="monthcolor" type="text"  value="#E0FFFF"/>
    </li>
	
	<li class="ui-state-default" id="date">Date Ring &nbsp hide?
	<input id='dateshow' type='checkbox' name='dateshow' value='yes'/> 
	<input id="datecolor" name="datecolor" type="text"  value="#E6A9EC"/>
	</li>
	
	<li class="ui-state-default" id="hour">Hour Ring &nbsp hide?
	<input id='hourshow' type='checkbox' name='hourshow' value='yes'/> 
	<input id="hourcolor" name="hourcolor" type="text"  value="#57E964"/>
	</li>
	
	<li class="ui-state-default" id="minute">Minute Ring &nbsp hide?
	<input id='minuteshow' type='checkbox' name='minuteshow' value='yes'/> 
	<input id="minutecolor" name="minutecolor" type="text"  value="#ADA96E"/>
	</li>
	
	<li class="ui-state-default" id="second">Second Ring&nbsp hide?
	<input id='secondshow' type='checkbox' name='secondshow' value='yes'/>
	<input id="secondcolor" name="secondcolor" type="text"  value="#C48793"/>
	</li>
	
	<li class="ui-state-default" id="week">Week Ring &nbsp hide?
	<input id='weekshow' type='checkbox' name='weekshow' value='yes'/>
	<input id="weekcolor" name="weekcolor" type="text"  value="#FFE87C"/>
	</li>
	
</ul>



<br/>

<button type="button" onclick="applyChange()"> apply changes	</button>
<button type="button" onclick="restoreDefault()">restore to default setting</button>

<br/>
<br/>

<script>
function applyChange()
{
    var data="";
	var total=0;
	var position=0;
    var sorted = $('#sortable').sortable('toArray');
	for (var i=0; i<sorted.length; i++)
	{
	    var checkId=sorted[i]+"show";
		
		if(document.getElementById(checkId).checked==false)
		{
		    total++;
		}		
	}
	
	for (var i=0; i<sorted.length; i++)
	{
	    var checkId=sorted[i]+"show";
		var colorId=sorted[i]+"color";
		
		if(document.getElementById(checkId).checked==false)
		{
		    var color=document.getElementById(colorId).value;
			var ringData=generateRing(total, position, checkId, color);
			data=data+ringData;
			position++;
		}
		
	}
	setCookie("rings", data, 3600);
    alert("changes applied to the clock");
	window.location = "clock.htm";
}

function restoreDefault()
{
    defaultRings();		
    alert("clock restore to default");
	window.location = "clock.htm";
}
</script>

    <article></article>
	
	<footer>page powered by <img src="icons/HTML5_Logo_32.png" alt="HTML5"/></footer>


</body>
</html>